<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>照片墙</title>

    <style>
        body {
            margin: 0px;
            background: #222 !important;
        }


        #div2 {

            background-image: url(w3.jpeg);

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            min-width: 1000px;

            z-index: -10;

            zoom: 1;

            background-color: #222;

            background-repeat: no-repeat;

            background-size: cover;

            -webkit-background-size: cover;

            -o-background-size: cover;

            background-position: center 0;

        }

        #photo_box {

            width: 280px;

            height: 400px;

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: 200px auto;

            transform-style: preserve-3d;
            /*表示所有子元素在3D空间中呈现*/

            transform: rotateX(-5deg) rotateY(0deg);

            animation: run 30s linear infinite;
            /*循环执行run动画，每30秒执行一次*/

        }



        /*设置图像大小、边框、圆角、位置*/

        #photo_box img {

            width: 250px;

            height: 350px;

            border: 5px solid #ccc;

            border-radius: 5px;

            position: absolute;

            left: 0;

            top: 0;

        }



        /*依次设置图像盒子中每个图像旋转后位置*/

        #photo_box img:nth-child(1) {

            transform: rotateY(0deg) translateZ(500px);

        }

        #photo_box img:nth-child(2) {

            transform: rotateY(36deg) translateZ(500px);

        }

        #photo_box img:nth-child(3) {

            transform: rotateY(72deg) translateZ(500px);

        }

        #photo_box img:nth-child(4) {

            transform: rotateY(108deg) translateZ(500px);

        }

        #photo_box img:nth-child(5) {

            transform: rotateY(144deg) translateZ(500px);

        }

        #photo_box img:nth-child(6) {

            transform: rotateY(180deg) translateZ(500px);

        }

        #photo_box img:nth-child(7) {

            transform: rotateY(216deg) translateZ(500px);

        }

        #photo_box img:nth-child(8) {

            transform: rotateY(252deg) translateZ(500px);

        }

        #photo_box img:nth-child(9) {

            transform: rotateY(288deg) translateZ(500px);

        }

        #photo_box img:nth-child(10) {

            transform: rotateY(324deg) translateZ(500px);

        }

        #photo_box img:nth-child(11) {

            transform: rotateY(360deg) translateZ(500px);

        }



        /*采用@keyframes 规则创建run动画。*/

        @keyframes run {

            0% {
                transform: rotateX(0deg) rotateY(0deg);

            }

            25% {
                transform: rotateX(10deg) rotateY(90deg);

            }

            50% {
                transform: rotateX(0deg) rotateY(180deg);

            }

            75% {
                transform: rotateX(-10deg) rotateY(270deg);

            }

            100% {
                transform: rotateX(0deg) rotateY(360deg);

            }

        }

        #text1 {

            float: left;

            color: #fff;

            width: 150px;

            padding: 12px 0;

            height: 50px;

        }

        #text2 {

            float: right;

            width: 100px;

            color: #fff;

            padding: 12px 0;

            height: 50px;

        }

        #text3 {

            float: right;

            width: 100px;

            color: #fff;

            padding: 12px 0;

            height: 50px;

        }
    </style>

</head>

<body>
    <div id="div2">

        <div id="photo_box">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
            <img src="img/5.jpg">
            <img src="img/6.jpg">
            <img src="img/7.jpg">
            <img src="img/8.jpg">
            <img src="img/9.jpg">
            <img src="img/10.jpg">
            <img src="img/11.jpg">
            <img src="img/12.jpg">
            <img src="img/13.jpg">
            <img src="img/14.jpg">
            <img src="img/15.jpg">
        </div>

    </div>

</body>


</html>